<template>
  <div class="maintenance_detail">
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>基本信息</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="12"
               class="detail-table__col">
          故障机台：{{details.machineInstanceName}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          游戏位：{{['店内','店外'][details.machineInstanceSlotNo]}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          机台供应商：{{details.supplyName}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          资产编码：{{details.snCode}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          故障等级：{{['','一级','二级','三级','四级'][details.faultLevel]}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          对应故障 ：{{details.faultType}}
          </Col>
        </Row>
        <!-- <Row>
          <Col span="12"
               class="detail-table__col">
          处理结果：
          </Col>
          <Col span="12"
               class="detail-table__col">
          </Col>
        </Row> -->
      </div>
    </div>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>机台信息</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="12"
               class="detail-table__col">
          故障机台：{{details.machineInstanceName}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          资产编码：{{details.snCode}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          游戏位：{{['店内','店外'][details.machineInstanceSlotNo]}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          维修部位：{{details.repairPart}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          数量：{{details.quantity}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          单位：{{details.unit}}
          </Col>
        </Row>
        <Row>
          <Col span="12"
               class="detail-table__col">
          机台供应商：{{details.supplyName}}
          </Col>
          <Col span="12"
               class="detail-table__col">
          是否延期：{{['否','是'][details.needDelay]}}
          </Col>
        </Row>
      </div>
    </div>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>维修信息</h3>
      </div>
      <el-table :data="dataList"
                :span-method="arraySpanMethod"
                border
                style="width: 100%">
        <el-table-column prop="step"
                         label="流程"
                         width="90">
          <template slot-scope="scope">
            <span>{{['','第一步','第二步','第三步','第四步','第五步','第六步'][scope.row.step]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="principal"
                         label="负责方">
        </el-table-column>
        <el-table-column prop="eventName"
                         label="事件">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { repairDetail } from '@/api/asset/repair/asset-manage.js'
import { Table, TableColumn } from 'element-ui'
export default {
  name: 'maintenance_detail',
  components: { ElTable: Table, ElTableColumn: TableColumn },
  data () {
    return {
      details: {},
      sameLen: 0,
      mergeData: {}, // 合并行的记录
      mergePos: {}, // mergeData中每项的索引
      mergeProp: ['step', 'principal'],
      mergeKeys: ['stepId', 'principalId'],
      dataList: [
        // {
        //   round: 1,
        //   step: 1,
        //   principal: '技术服务中心',
        //   eventName: '返厂维修地址',
        //   eventValue: '菲尔特和投入黑胡椒撒发大水'
        // },
        // {
        //   round: 1,
        //   step: 1,
        //   principal: '技术服务中心',
        //   eventName: '厂家联系人',
        //   eventValue: '打发丰富的是'
        // },
        // {
        //   round: 1,
        //   step: 1,
        //   principal: '技术服务中心',
        //   eventName: '厂家联系人',
        //   eventValue: '打发丰富的是'
        // }
      ],
      wxtableWidth: ''
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {
    this.getSpanArr(this.dataList, this.mergeKeys)
    this.getDetails()
  },
  methods: {
    getSpanArr (tableData, keyName) {
      // if (tableData.length > 1) {
      keyName.forEach((kitem, k) => {
        tableData.forEach((data, i) => {
          if (i === 0) {
            this.mergeData[kitem] = this.mergeData[kitem] || []
            this.mergeData[kitem].push(1)
            this.mergePos[kitem] = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[kitem] === tableData[i - 1][kitem]) {
              this.mergeData[kitem][this.mergePos[kitem]] += 1
              this.mergeData[kitem].push(0)
            } else {
              this.mergeData[kitem].push(1)
              this.mergePos[kitem] = i
            }
          }
        })
      })
      // }
      console.log(this.mergeData)
      console.log(this.mergePos)
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (this.mergeProp.includes(column.property)) {
        const _row = this.mergeData[column.property + 'Id'][rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    getDetails () {
      repairDetail({ machineRepairId: this.$route.query.id }).then(res => {
        if (res.data.status === 200) {
          this.details = res.data.data
          this.dataList = res.data.data.machineRepairDetailList.filter(ele => ele.step)
          console.log(res.data.data)
        }
      })
    }
  }
}
</script>
<style lang="less">
@import '~@/assets/stylus/detail-table.less';
.maintenance_detail {
  padding: 25px 100px;
  .container {
    margin-bottom: 70px;
    .commodity-title {
      display: flex;
      margin-bottom: 30px;
      p {
        width: 8px;
        height: 20px;
        margin-right: 10px;
        background-color: #2d8cf0;
      }
    }
  }
  .detail-table-multimedia {
    display: flex;
  }
  .detail-table-multimedia-frist {
    position: relative;
    &::after {
      content: '商品主图';
      display: block;
      position: absolute;
      top: 5px;
      left: 5px;
      background: #e7314e;
      height: 21px;
      padding: 2px 5px;
      // width: 48px;
      font-size: 12px;
      text-align: center;
      color: #fff;
    }
  }
}
</style>
